<template>
    <div class="main-content">
        <levelbar></levelbar>
             <div class="form-box">
                 <p class="form-title">修改密码</p>
                 <div class="form updataPassword">
                    <el-form  class="showSecond" :rules="rules" :model="ruleForm" label-width="100px" ref="ruleForm" status-icon>
                        <el-row :gutter="41" class='input-hidden'>
                            <el-col :span="10">
                                <el-input name="old-pwd" type="password" disabled ></el-input>
                                <el-input name="old-pwd" type="password" disabled ></el-input>
                            </el-col>
                        </el-row>
                         <el-row class="input-editor">
                            <el-col>
                                <el-form-item prop="password" label="原密码">
                                    <el-input type="text" v-model="ruleForm.password" placeholder="请输入原密码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="input-editor">
                                <el-col>
                                    <el-form-item prop="newPassword" label="新密码">
                                        <el-input type="password" v-model="ruleForm.newPassword" placeholder="请输入新密码"></el-input>
                                    </el-form-item>
                                </el-col>
                        </el-row>
                        <el-row class="input-editor">
                            <el-col>
                                <el-form-item prop="confirmPassword" label="确认新密码">
                                    <el-input type="password" v-model="ruleForm.confirmPassword" placeholder="请再次输入新密码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="submit-box">
                            <el-col :span="12">
                                <el-button class="btn" @click="backto">返回</el-button>
                            </el-col>
                            <el-col :span="12" class="right-btn">
                                <el-button type="primary" @click="submitForm('ruleForm')" class="btn">确认修改</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                 </div>
            </div>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import {updatePassword, validatePasswordLib} from 'api/login'
import sha256 from 'sha256';

export default {
    components: {
        TableLayout,
        Levelbar
    },
    name: 'modifyPass',
    data() {
        var validatePassword = (rule, value, callback) => {

            if (value === '') {
                callback(new Error('原始密码不能为空！'));
            } else {
                if (value) {
                    validatePasswordLib(sha256(value)).then((data) => {
                        // 验证通过
                        callback();
                    }).catch(e => {
                        // console.log(e);
                        callback(new Error('原始密码错误！'));
                    });
                }
                
                if (this.ruleForm.newPassword !== '') {
                    this.$refs.ruleForm.validateField('newPassword');
                }
            }
        };
        var validateNewPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else if (value == this.ruleForm.password) {
                callback(new Error('新密码不能与原始密码相同！'));
            } else if (!/^[a-zA-Z0-9]{6,16}$/.test(value)) {
                callback(new Error('新密码由6~16位英文、数字所组成！'));
            } else {
                if (this.ruleForm.newPassword !== '') {
                    this.$refs.ruleForm.validateField('confirmPassword');
                }
                callback();
            }
        };
        var validateConfirmPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('确认密码不能为空！'));
            } else if (value !== this.ruleForm.newPassword) {
                callback(new Error('两次密码输入不一致！'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                password: '',
                newPassword: '',
                confirmPassword: ''
            },
            rules: {
                password: [
                    { required: true, message: '输入原密码', trigger: 'blur' },
                    { validator: validatePassword, trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '输入新密码', trigger: 'blur' },
                    { validator: validateNewPassword, trigger: 'blur,change' }
                ],
                confirmPassword: [
                    { required: true, message: '确认密码不能为空！', trigger: 'blur' },
                    { validator: validateConfirmPassword, trigger: 'blur,change' }
                ]
            },
            buttonLoading: false
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this._updatePassword(sha256(this.ruleForm.password), sha256(this.ruleForm.newPassword), sha256(this.ruleForm.confirmPassword));
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        backto() {
            this.$router.go(-1);
        },
        _updatePassword(password, newPassword, confirmPassword) {
            this.buttonLoading = true;
            updatePassword(password, newPassword, confirmPassword).then((data) => {
                this.buttonLoading = false;
                if (data.status == 200) {
                    this.$message({
                        message: '修改密码成功！',
                        type: 'success'
                    });
                    this.$router.go(-1);
                    this.$refs[formName].reset();
                }
            }).catch(e => {
                this.buttonLoading = false;
                console.log('失败');   
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.main-content{
    position: relative;
    padding: 20px 20px 10px;
    width: 1400px;
    margin: 0 auto;
}
.form-box{
    overflow: hidden;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    padding: 0 20px;
    margin: 20px 0 2px;
    border-radius: 4px;
    background: #fff;
    padding-top: 24px;
    margin-top: 0;
    .form-title{
        	width: 80px;
            height: 36px;
            font-family: MicrosoftYaHei;
            font-size: 20px;
            line-height: 36px;
            color: #333333;
    }
    .form{
        width:468px;
        height: 408px;
        margin:20px auto 0;
        .right-btn{
            text-align: right
        }
        .btn{
            width: 120px;
            height: 40px;
            border-radius: 4px 4px 4px 4px;
        }
        .submit-box{
            margin-left: 100px;
            margin-top:10px;
        }
       
    }
    .input-editor {
        margin-bottom: 15px;
    }
    .input-hidden{
        visibility: hidden;
        position: absolute;
        z-index: -1;
    }
}
</style>

